<style scoped>

</style>
<template>
  <div>
    <div id="EChart" style="width: 300px;height: 200px"></div>

  </div>
</template>
<script>
  import echarts from 'echarts'

  export default {
    components: {},
    data() {
      return {}
    },
    mounted: function () {
      this.getChart();


    },
    methods: {
      getChart: function () {
        let myChart = echarts.init(document.getElementById('EChart'));
        myChart.setOption( {
          title: {
            text: 'Graph 简单示例'
          },
          tooltip: {},
          animationDurationUpdate: 1500,
          animationEasingUpdate: 'quinticInOut',
          series : [
            {
              type: 'graph',
              layout: 'none',
              symbolSize: 50,
              roam: true,
              label: {
                normal: {
                  show: true
                }
              },
              edgeSymbol: ['circle', 'arrow'],
              edgeSymbolSize: [4, 10],
              edgeLabel: {
                normal: {
                  textStyle: {
                    fontSize: 20
                  }
                }
              },
              data: [{
                name: '节点1',
                x: 300,
                y: 100
              }, {
                name: '节点2',
                x: 400,
                y: 100
              }, {
                name: '节点3',
                x: 500,
                y:100
              },
                {
                  name: '节点4',
                  x: 600,
                  y: 100
                },
                {
                  name: '节点5',
                  x: 450,
                  y: 200
                },

                {
                  name: '节点6',
                  x: 350,
                  y: 250
                },

                {
                  name: '节点7',
                  x: 450,
                  y: 250
                },

                {
                  name: '节点8',
                  x: 550,
                  y: 250
                },


                {
                  name: '节点9',
                  x: 350,
                  y: 300
                },

                {
                  name: '节点10',
                  x: 450,
                  y: 300
                },

                {
                  name: '节点11',
                  x: 550,
                  y: 300
                },


                {
                  name: '节点12',
                  x: 350,
                  y: 350
                },

                {
                  name: '节点13',
                  x: 450,
                  y: 350
                },

                {
                  name: '节点14',
                  x: 550,
                  y: 350
                },
              ],
              // links: [],
              links: [
                {
                  source: '节点1',
                  target: '节点5',
                  lineStyle: {
                    normal: { curveness: -0.2 }
                  }
                }, {
                  source: '节点2',
                  target: '节点5',
                  lineStyle: {
                    normal: { curveness: -0.2 }
                  }
                }, {
                  source: '节点3',
                  target: '节点5',
                  lineStyle: {
                    normal: { curveness: 0.2 }
                  }
                },
                {
                  source: '节点4',
                  target: '节点5',
                  lineStyle: {
                    normal: { curveness: 0.2 }
                  }
                },

                {
                  source: '节点5',
                  target: '节点6',
                  lineStyle: {
                    normal: { curveness: -0.2 }
                  }
                },

                {
                  source: '节点5',
                  target: '节点7',
                  lineStyle: {
                    normal: { curveness: 0.2 }
                  }
                },
                {
                  source: '节点5',
                  target: '节点8',
                  lineStyle: {
                    normal: { curveness: 0.2 }
                  }
                },

                {
                  source: '节点6',
                  target: '节点9',
                  lineStyle: {
                    normal: { curveness: -0.2 }
                  }
                },
                {
                  source: '节点7',
                  target: '节点10',
                  lineStyle: {
                    normal: { curveness: 0.2 }
                  }
                },
                {
                  source: '节点8',
                  target: '节点11',
                  lineStyle: {
                    normal: { curveness: 0.2 }
                  }
                },
                {
                  source: '节点9',
                  target: '节点12',
                  lineStyle: {
                    normal: { curveness: -0.2 }
                  }
                },
                {
                  source: '节点10',
                  target: '节点13',
                  lineStyle: {
                    normal: { curveness: 0.2 }
                  }
                },
                {
                  source: '节点11',
                  target: '节点14',
                  lineStyle: {
                    normal: { curveness: 0.2 }
                  }
                },

              ],
              lineStyle: {
                normal: {
                  opacity: 0.9,
                  width: 2,
                  curveness: 0
                }
              }
            }
          ]
        });
        window.onresize = function () {
          myChart.resize();

        }

      }

    }
  }
</script>
